<template>
  <div class="resource-pool">
    <e-container class="container">
      <div class="top">
        <e-title-add title="Resource Pool" addTitle="Add Language Pair" @clickAdd="addLanguagePair" />
      </div>
      <resourceContent />
    </e-container>

    <a-modal
      v-model:visible="lpVisible"
      wrap-class-name="primary-modal"
      width="888px"
      title="Add Language Pair"
      @cancel="handleCancel"
    >
      <a-form ref="formRef" layout="vertical" :model="formState" :rules="rules">
        <div style="display: flex; justify-content: space-between">
          <div>
            <a-form-item name="sourceLanguage" label="Source Language">
              <a-select
                v-model:value="formState.sourceLanguage"
                style="width: 360px !important"
                placeholder="Please select"
              >
                <a-select-option value="0">Chinese</a-select-option>
                <a-select-option value="1">English</a-select-option>
              </a-select>
            </a-form-item>
          </div>
          <div>
            <a-form-item name="targetLanguage" label="Target Language">
              <a-select
                v-model:value="formState.targetLanguage"
                style="width: 360px !important"
                placeholder="Please select"
              >
                <a-select-option value="0">Chinese</a-select-option>
                <a-select-option value="1">English</a-select-option>
              </a-select>
            </a-form-item>
          </div>
        </div>
      </a-form>
      <template #footer>
        <a-button key="back" @click="handleCancel">Cancel</a-button>
        <a-button key="submit" type="primary" @click="handleSave">Save</a-button>
      </template>
    </a-modal>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import EContainer from '@/components/EContainer.vue'
import ETitleAdd from '@/components/ETitleAdd.vue'
import ResourceContent from './resourceContent.vue'

const lpVisible = ref(false)
const formState = reactive({
  sourceLanguage: undefined,
  targetLanguage: undefined
})
const rules = {
  sourceLanguage: [
    {
      required: true,
      message: 'Please select Source Language',
      trigger: 'blur'
    }
  ],
  targetLanguage: [
    {
      required: true,
      message: 'Please select Target Language',
      trigger: 'blur'
    }
  ]
}
const formRef = ref()
/**
 * Add Language Pair
 */
const addLanguagePair = () => {
  lpVisible.value = true
}
/**
 * Close Language Pair
 */
const handleCancel = () => {
  lpVisible.value = false
  formRef.value.resetFields()
}
/**
 * Save Language Pair
 */
const handleSave = () => {
  formRef.value
    .validate()
    .then(() => {
      alert('Successful!')
      handleCancel()
    })
    .catch(() => {})
}
</script>

<style scoped lang="less">
.resource-pool {
  width: 100%;
  height: 100%;
  .container {
    width: 100%;
    height: 100%;
    .top {
      padding-bottom: 4px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
}
</style>
<route lang="yaml">
name: Resource Pool Real
path: '/client/:id/resource-pool-real'
meta:
  sort: 150
  title: Resource Pool Real
  icon: ResourcePool
  permission: ResourcePool
</route>
